<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>想法页面</title>
  <link rel="stylesheet" href="../static/css/mainPage.css" th:href="@{/css/mainPage.css}">
  <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
  <link rel="stylesheet" href="../static/css/thoughtMainPage.css" th:href="@{/css/thoughtMainPage.css}">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
<div style="height: 9.5vh; display: flex; justify-content: center; align-items: center; position: relative;background-color: white;width: 100%" th:replace="nav::nav">

</div>
<div class="top-story-container">
  <div class="top-story-main-column">
    <div class="top-story-main-column-card">
<div class="video-item" th:each="post, postStat : ${pageInfo.list}">
  <a  th:href="@{/thought/select/id?id={id}(id=${post.id})}" style="color: black">
  <div class="video-content">
    <p class="video-title" th:text="${post.title}" style="font-weight: 600"></p>
    <p class="video-title content-detail" th:text="${post.content}"></p>
    <div class="video-meta" th:each="user, userStat : ${users}" th:if="${userStat.index == postStat.index}">
      <span class="video-author" th:text="${user.username}">汽车发烧友小李</span>
      <span class="video-comment" ><span th:text="${user.followerCount}"></span>粉丝</span>
      <span class="video-date" th:text="${post.createTime}">03月29日</span>
    </div>
  </div>
    </a>
</div>
    </div>
</div>
<div class="top-story-right-column">
  <div class="creation-center-outer">
    <div class="creation-center-container">
      <div class="creation-center-container-title">
                                <span style="font-size: 15px;">
                                    <i class="iconfont" style="font-size: 21px;">&#xe6c7;</i>
                                    创作中心
                                </span>
        <span style="font-size: 12px; color:#99a0a7; ;">
                                草稿箱(0)
                               </span>

      </div>
      <div class="creation-center-container-function">

        <div class="post-vedio">

          <span class="vedio-span"><i class="iconfont vedio" style="color: #ff9606;">&#xe60a;</i></span>
          <i>发视频</i>
        </div>
        <div class="write-article">
          <span class="article-span"><i class="iconfont article" style="color: yellowgreen;">&#xe640;</i></span>
          <i>写文章</i>
        </div>
        <div class="write-thought-button">
                            <span class="thought-span"><i class="iconfont thought"
                                                          style="color: rgb(11, 151, 158);">&#xe614;</i></span>
          <i>写想法</i>

        </div>
        <div class="write-thought" style="display: none;">

          <form id="thoughtForm" th:action="@{/thought/add}" method="post">
            <div class="post-popup">
              <input type="text" name="code" style="display: none" class="none-input">
              <input type="text" id="titleInput" placeholder="请输入标题 (选填)" maxlength="50" name="title">
              <div class="char-count" id="titleCharCount">0/50</div>
              <textarea id="contentTextarea" placeholder="分享你此刻的想法..." name="content"></textarea>
              <div class="char-count char-count2" id="contentCharCount">0/300</div>

              <button id="postButton">发布</button>
              <div class="close-icon" id="closeButton">&times;</div>
            </div>
          </form>

        </div>
      </div>
      <div class="creation-center-container-prompt">
        <div class="left">
          <p>开启你的慧问创作之旅吧</p>
          <span>即将推出处女作，解锁创作之旅
                                        速来加入慧问创作者行列吧~
                                    </span>
        </div>
        <div class="right">

          <img src="../static/img/可爱的小狗_05_爱给网_aigei_com.gif" alt="" th:src="@{/img/可爱的小狗_05_爱给网_aigei_com.gif}">
        </div>

      </div>
      <div class="write-outer">
        <button class="write-button">
          <i class="iconfont" style="color: rgb(0, 170, 255);">&#xe69a;</i>
          开始创作
        </button>
      </div>
    </div>
  </div>
  <div class="carefully-selected-author-outer">
    <div class="carefully-selected-author-container">
      <div class="carefully-selected-author-head"><i class="iconfont">&#xe6df;</i>
        盐选作者平台</div>
      <div class="carefully-selected-author-body">
                                <span>匠心打磨，丰厚收益<br>
                                    <i>已有60万+作者入驻</i>
                                </span>
        <span>
                                    <img src="../static/img/金钱(Money)_爱给网_aigei_com.gif" alt="" th:src="@{/img/金钱(Money)_爱给网_aigei_com.gif}">
                                </span>
      </div>
      <div class="carefully-selected-author-button">
        <button><i class="iconfont">&#xe65d;</i>去投稿</button>
      </div>
    </div>
  </div>
</div>

</div>
</div>
</div>
<script th:inline="javascript">
  let posts = [[${pageInfo}]];
  let users = [[${users}]];
  console.log(posts)
  console.log(users)
  const titleCharCount = document.getElementById('titleCharCount');
  const contentTextarea = document.getElementById('contentTextarea');
  const contentCharCount = document.getElementById('contentCharCount');
  const closeButton = document.getElementById('closeButton');
  const writeThought=document.getElementsByClassName('write-thought')[0]
  const writeThought_button=document.getElementsByClassName('write-thought-button')[0]
  let wait_answer1=document.getElementsByClassName('wait-answer')[0]
  console.log(wait_answer1)
  wait_answer1.addEventListener('click',()=>{
    event.preventDefault();
    window.location.href='http://localhost:8080/thoughtMainPage'
  })

  let mainPage=document.getElementsByClassName('mainPage')[0]
  mainPage.addEventListener('click',()=>{
    event.preventDefault();
    window.location.href='http://localhost:8080/mainPageRecommend'
  })

  const post_vedio=document.getElementsByClassName('post-vedio')[0]
  post_vedio.addEventListener('click',()=>{
    window.location.href = "http://localhost:8080/vedio";
  })

  let personalMainPage=document.getElementsByClassName('personalMainPage')[0]
  console.log(personalMainPage)
  personalMainPage.addEventListener('click',()=>{
    event.preventDefault();
    window.location.href='http://localhost:8080/userHomepage'
  })
  let mask=document.getElementsByClassName('mask')[0]
  closeButton.addEventListener('click',()=>{
    console.log(closeButton)
    writeThought.style.display='none'
    contentTextarea.value=''
    titleInput.value=''
    document.body.classList.remove('open')
    mask.style.display='none'
  })
  writeThought_button.addEventListener('click',()=>{
    writeThought.style.display='block'
    mask.style.display='block'

    document.body.classList.add('open')
  })
  let write_button=document.getElementsByClassName('write-button')[0]
  write_button.addEventListener('click',()=>{
    window.location.href='http://localhost:8080/creativeCenter'
  })
  const write_article=document.getElementsByClassName('write-article')[0]
  write_article.addEventListener('click',()=>{
    window.location.href = "http://localhost:8080/postArticle";
  })

  // 标题字数统计
  titleInput.addEventListener('input', function () {
    const charCount = titleInput.value.length;
    titleCharCount.textContent = charCount + '/50';
  });
  contentTextarea .addEventListener('input',function(){
    const charCount=contentTextarea.value.length
    contentCharCount.textContent=charCount+'/300'
  })

  closeButton.addEventListener('click',()=>{
    console.log(closeButton)
    writeThought.style.display='none'
    contentTextarea.value=''
    titleInput.value=''
    document.body.classList.remove('open')
    mask.style.display='none'
  })
  writeThought_button.addEventListener('click',()=>{
    writeThought.style.display='block'
    mask.style.display='block'

    document.body.classList.add('open')
  })
  let currentPage = 1; // 当前页码
  let totalPages = 1; // 总页数
  let isLoading = false; // 加载状态标记

  let hasMorePosts = true;
  let currentPostId = null;
  // 监听滚动事件
  window.addEventListener('scroll', checkScroll);

  function checkScroll() {
    // 如果正在加载或没有更多帖子，则不执行任何操作
    if (isLoading || !hasMorePosts) return;

    // 计算是否接近页面底部
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const clientHeight = document.documentElement.clientHeight;

    if (scrollTop + clientHeight >= scrollHeight - 300) {
      loadMorePosts();
      console.log("监测成功一次")
    }
  }



  function loadMorePosts() {
    isLoading = true;

    // 显示加载指示器
    const loadingIndicator = document.createElement('div');
    loadingIndicator.className = 'loading-indicator';
    loadingIndicator.innerHTML = '<i class="iconfont">&#xe60f;</i> 加载中...';
    document.querySelector('.top-story-main-column-card').appendChild(loadingIndicator);
    // 使用$.ajax发送请求获取更多帖子
    $.ajax({
      url: `/thoughtMainPage/more?pageNum=${currentPage + 1}`,
      type: 'GET',

      success: function(result) {

        console.log(result)

        if (!result.postsPageInfo || !result.postsPageInfo.list || result.postsPageInfo.list.length === 0) {
          hasMorePosts = false;
          loadingIndicator.innerHTML = '没有更多内容了';
          setTimeout(() => loadingIndicator.remove(), 2000);
          return;
        }
        const postContainer=document.getElementsByClassName('top-story-main-column-card')[0]
        console.log(top_story_content_detail)
        // 获取帖子列表和用户列表

        console.log(posts)



        newPosts.forEach((post, index) => {
          // 获取对应的用户信息
          const user = newUsers[index];

          // 创建新的DOM元素
          const newPostDiv = $("<div>").addClass("video-item");
          newPostDiv.html(`
        <a href="/thought/select/id?id=${post.id}" style="color: black">
          <div class="video-content">
            <p class="video-title" style="font-weight: 600">${post.title}</p>
            <p class="video-title content-detail">${post.content}</p>
            <div class="video-meta">
              <span class="video-author">${user.username}</span>
              <span class="video-comment"><span>${user.followerCount}</span>粉丝</span>
              <span class="video-date">${post.createTime}</span>
            </div>
          </div>
        </a>
      `);

          postContainer.append(newPostDiv);
        });

        // 更新当前页码
        currentPage++;

        // 移除加载指示器
        loadingIndicator.remove();
        isLoading=false;
      },
      error: function(error) {
        console.error('加载更多帖子失败:',error);
        loadingIndicator.innerHTML = '加载失败，请重试';
        setTimeout(() => loadingIndicator.remove(), 2000);
        // 重置加载状态
        isLoading = false;
      },

    });
  }

  function showCustomAlert(message, duration) {
    let customAlert = document.getElementById('customAlert');
    if (!customAlert) {
      div_outter=document.createElement('div');
      customAlert = document.createElement('div');
      customAlert.id = 'customAlert';
      // customAlert.style.margin='7px 12px';
      const alertMessage = document.createElement('p');
      alertMessage.id = 'alertMessage';
      customAlert.appendChild(alertMessage);

      document.body.appendChild(customAlert);
    }

    const alertMessage = document.getElementById('alertMessage');

    alertMessage.textContent = message;
    if(alertMessage.textContent==null){
      customAlert.style.display = 'none';
    }

    customAlert.style.display = 'block';
    setTimeout(() => {
      customAlert.style.display = 'none';
    }, duration);
  }
  let errorMessage = [[${errorMessage}]];

  if (errorMessage && errorMessage !== '') {
    showCustomAlert(errorMessage, 3000);
  }
</script>
<script src="../static/js/video.js" th:src="@{/js/video.js}"></script>
</body>

</html>